import React, { Component, createRef } from "react";
import { PageHeader, Button, Space, Table, Tag, Pagination } from "antd";
import styled from "styled-components";
import url from "@/config/url";
import axios from "@/http/http";
// 引入模态框组件
import ModalCom from "../../../components/ModalCom";

class Index extends Component {
  constructor() {
    super();
    this.columns = [
      {
        title: "序号",
        dataIndex: "id", // 表示该列对应的是数组中的那个字段
        align: "center",
        // render: (text) => <a>{text}</a>,
        key: "id",
      },
      {
        title: "用户名",
        dataIndex: "username",
        align: "center",
        key: "username",
      },
      {
        title: "手机号",
        dataIndex: "mobile",
        align: "center",
        key: "mobile",
      },
      {
        title: "邮箱",
        dataIndex: "email",
        align: "center",
        key: "email",
      },
      {
        title: "性别",
        dataIndex: "gender",
        align: "center",
        key: "gender",
        render: (text, record, index) => {
          // 参数分别为当前行的值，当前行数据，行索引
          // return text == 1 ? (
          //   <Tag color="red" key={index}>
          //     男
          //   </Tag>
          // ) : (
          //   <Tag color="green" key={index}>
          //     女
          //   </Tag>
          // );
          if (text == 1) {
            return (
              <Tag color="red" key={index}>
                男
              </Tag>
            );
          }
          if (text == 2) {
            return (
              <Tag color="green" key={index}>
                女
              </Tag>
            );
          }
          if (text == 3) {
            return (
              <Tag color="blue" key={index}>
                保密
              </Tag>
            );
          }
        },
      },
      {
        title: "状态",
        dataIndex: "status",
        align: "center",
        key: "status",
        render: (text, record, index) => {
          // 参数分别为当前行的值，当前行数据，行索引
          return text == 1 ? (
            <Tag color="green" key={index}>
              正常
            </Tag>
          ) : (
            <Tag color="red" key={index}>
              禁用
            </Tag>
          );
        },
      },
      {
        title: "操作",
        dataIndex: "action",
        align: "center",
        key: "action",
        render: (_, record) => (
          <Space size="middle">
            <Button type="primary">编辑</Button>
            <Button type="danger">删除</Button>
          </Space>
        ),
      },
    ];
  }
  state = {
    page: 1, // 当前页数
    data: [], // 表格数组
    total: 0, // 数据总条数
    modalTitle: "", // 子组件模态框中的title标题
  };
  // 创建引用对象,给子组件或普通元素绑定该属性
  ref1 = createRef();
  render() {
    return (
      <div>
        <Title>
          <PageHeader
            className="site-page-header"
            title="用户列表"
            extra={[
              <Button type="primary" key="1" onClick={this.addUserFn}>
                添加
              </Button>,
            ]}
          />
        </Title>
        {/* 表格部分 */}
        <Table
          columns={this.columns}
          dataSource={this.state.data}
          pagination={false}
          rowKey={(columns) => columns.id}
        />
        {/* 分页部分 */}
        <Pagination
          defaultCurrent={this.state.page}
          total={this.state.total}
          onChange={this.onChange}
        />
        {/* 模态框组件 */}
        <ModalCom
          ref={this.ref1}
          modalTitle={this.state.modalTitle}
          loadData={this.loadData}
        ></ModalCom>
      </div>
    );
  }
  componentDidMount() {
    this.loadData();
  }
  // 请求数据列表
  loadData = () => {
    axios
      .get(url.getuserlist, {
        params: {
          page: this.state.page,
        },
      })
      .then((res) => {
        // console.log(res);
        this.setState({
          page: res.data.paginate.current_page, // 当前页数
          data: res.data.paginate.data, // 表格数组
          total: res.data.paginate.total, // 数据总条数
        });
      })
      .catch((e) => {});
  };
  // 切换分页
  onChange = (page, pageSize) => {
    // console.log(page, pageSize);
    this.setState(
      {
        page: page,
      },
      () => {
        this.loadData();
      }
    );
  };
  // 点击添加事件
  addUserFn = () => {
    // 01: 显示模态框
    console.log(this.ref1);
    this.ref1.current.showModal();
    // 修改模态框标题
    this.setState({
      modalTitle: "添加",
    });
  };
}

const Title = styled.div`
  border: 1px solid rgb(235, 237, 240);
`;

export default Index;
